<template>
  <div>
    <div class="outDiv">
      <div class="header">
        <div class="header_back" @click="backToPrev">
          <i class="imgIcon"></i>
          <span class="back">返回</span>
        </div>
        <h2>选科选课</h2>
        <div class="header_back"></div>
      </div>
      <scroller style="top: 0.88rem;" v-if="true">
        <div>
          <div class="mainssOut">
            <div class="mainImage">
              <img src="https://static.shengxue985.com/sxzx_wechat/images/chooseCourseIndex.png" alt />
            </div>
            <div class="choType">
              <div class="typeItem" @click="commonJs.gopush('majorRelation')"><img src="~@/static/images/choIndexType_1.png" alt="" /></div>
              <div class="typeItem" @click="commonJs.gopush('chooseSchool')"><img src="~@/static/images/choIndexType_2.png" alt="" /></div>
            </div>
          </div>
          <div style="width: 100%; height: 3rem"></div>
        </div>
      </scroller>
      <div class="btn">
        <sumbitBtn message="立即开始" @btnClick="goes"></sumbitBtn>
        <button class="watchRecord" @click="commonJs.gopush('planRecord')">查看最佳选课方式</button>
      </div>
    </div>
    <LoginVerification :isShowModal="isShowModal" v-on:fromChildloginVerification="loginVers" headTitle="选科选课服务"></LoginVerification>
    <BuyVip :xBuy="showBuyVipModle" serverName="选课选课功能" @handleCloseBuyDialog="showBuyVipModle = false"></BuyVip>
  </div>
</template>

<script>
import ls from 'store2'
import { getUsage, getAdvantageUsage } from '~/api/selectCourse'
import { getTeacherUserInfoById, getUserInfoById, identityLogin } from '~/api/identity'
import LoginVerification from '~/components/LoginVerification'
import { backAppOrWx } from '~/common/common'
import sumbitBtn from './components/sumbitBtn'
import headerBack from '~/components/headerBack'
import BuyVip from '~/components/BuyVip'
export default {
  data() {
    return {
      loginer: false,
      isShowModal: false,
      showBuyVipModle: false,
    }
  },
  components: {
    LoginVerification,
    sumbitBtn,
    BuyVip,
    headerBack,
  },
  //   created() {
  //     // this.commonJs.accectAppParame()
  //   },
  mounted: function() {
    this.$visit(this.$route.path)
    this.$getVip()
    if (!ls.get('tokensyxk')) this.isShowModal = true
    this.showuserAreas()
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.removeItem('sendList')
    next()
  },

  methods: {
    loginVers(data) {
      identityLogin(data)
        .then((res) => {
          if (res.code === '0') {
            let usersData = res.data
            ls.set('yxkData', usersData)
            ls.set('userType', usersData.userType)
            ls.set('tokensyxk', usersData.accessToken)
            this.isShowModal = false
            this.$vux.toast.text('服务授权成功')
            this.showuserAreas()
          } else {
            this.$vux.toast.text(res.message)
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    showuserAreas() {
      if (!ls.get('tokensyxk') || ls.get('userArea')) {
        return false
      }
      getUserInfoById({ uid: ls.get('yxkData').userVoId })
        .then((res) => {
          let areas = res.data.area
          let areaArr = areas.split(',')
          let userArea = areaArr[0]
          ls.set('userArea', userArea)
          this.$hideLoading()
        })
        .catch((error) => {})
    },

    goes() {
      let isVipstrs = sessionStorage.getItem('isVipStr')
      if (isVipstrs.indexOf('选科选课') > -1) {
        this.commonJs.gopush('addIntention')
      } else {
        this.showBuyVipModle = true
      }
    },

    backToPrev() {
      backAppOrWx()
    },
  },
}
</script>

<style lang="less" scoped>
.default-page {
  img {
    display: block;
    width: 6rem;
    height: 5.2rem;
    margin: 1rem auto;
  }
  span {
    display: block;
    height: auto;
    width: 4rem;
    font-size: 0.3rem;
    color: gray;
    margin: 0 auto;
    text-align: center;
  }
}
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: relative;
  .mainssOut {
    padding: 0 0.1rem;
    overflow: hidden;
    margin-top: 0.3rem;

    h5 {
      font-size: 0.24rem;
      font-family: 'Source Han Sans CN';
      font-weight: 400;
      color: rgba(156, 156, 156, 1);
      display: block;
      text-align: center;
    }
    .mainImage {
      margin: 0 0.3rem 0.2rem;
      height: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .choType {
      margin: 0 0.3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .typeItem {
        width: 100%;
        height: auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .typeItem:last-child {
        margin-left: 0.3rem;
      }
    }

    .bar-btn {
      width: 2.8rem;
      height: auto;
      margin: 0.2rem auto 0;
    }

    .introduce {
      color: #666;
      font-weight: 500;
      padding: 0 0.5rem;

      p {
        margin-bottom: 0.3rem;
        letter-spacing: 0.02rem;
        font-size: 0.26rem;
        line-height: 0.39rem;
      }
    }

    .mainStep {
      padding: 0 0.5rem;
      margin-bottom: 0.8rem;
      color: #222;
      font-size: 0.26rem;
      font-weight: bold;

      .stepTitle {
        margin-bottom: 0.3rem;
        font-size: 0.26rem;
        font-family: Helvetica;
        color: rgba(34, 34, 34, 1);
      }

      .stepBoxWrap {
        .di1 {
          .img1 {
            display: block;
            width: 0.96rem;
            height: 0.96rem;
            margin: 0 auto;
          }

          b {
            text-align: center;
            display: block;
            font-size: 0.26rem;
            font-family: Helvetica;
            color: rgba(34, 34, 34, 1);

            display: block;
          }
        }

        .di2 {
          height: auto;

          .sp1 {
            height: 0.96rem;
            display: block;
            overflow: hidden;
            text-align: center;

            .spp {
              width: 0.96rem;
              height: 0.96rem;
            }

            .spp1 {
              height: 0.12rem;
              width: auto;
              margin-bottom: 0.42rem;
            }
          }

          b {
            text-align: center;
            font-size: 0.26rem;
            font-family: Helvetica;
            color: rgba(34, 34, 34, 1);

            display: block;
          }
        }

        .bb1 {
          margin-top: 0.44rem;
        }
      }

      .stepDescribe {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          text-align: center;
          font-weight: bold;
        }
      }
    }
  }
  .btn {
    width: 100%;
    height: 1.6rem;
    line-height: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 1px 0.33rem 0 rgba(13, 29, 55, 0.08);
    button {
      width: 3rem;
      height: 0.88rem;
      border-radius: 0.44rem;
      border: none;
      outline: none;
    }
    .watchRecord {
      background: transparent;
      border: 0.02rem solid #eee;
      color: rgba(153, 153, 153, 1);
      font-size: 0.3rem;
      font-weight: bold;
      width: 100%;
      margin-left: 0.3rem;
    }
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header_back {
    width: 2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .imgIcon {
      display: inline-block;
      width: 0.4rem;
      height: 0.4rem;
      background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
      background-size: 3rem 2.4rem;
    }

    .back {
      display: inline-block;
      margin-left: 0.1rem;
      font-weight: bold;
      color: #222;
    }
  }
  h2 {
    display: block;
    font-size: 0.4rem;
    font-family: 'Source Han Sans CN';
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    line-height: 0.4rem;
  }
}
</style>
